<template>
    <div>
        <section class="content-header">应急准备管理&nbsp;/&nbsp;应急预案&nbsp;/&nbsp;查看应急预案</section>
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-4">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">预案标题：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.plan}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">适用事件类型：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.typeName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">责任部门：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.sysDept.name}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <p class="form-control" style="height: auto;">{{form.remarks}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">修改信息：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.time}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">浏览次数：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.views}}</p>
                            </div>
                        </div>
                        <div
                            class="form-group"
                            style="margin-bottom:0px;"
                            v-for="(item,index) in form.filePath"
                            :key="item.value"
                        >
                            <label class="col-sm-4 control-label"></label>

                            <div class="col-sm-4">
                                <p class="p-file">附件{{index+1}}.{{getCaption(item)}}</p>
                            </div>
                            <div class="col-sm-2">
                                <!-- <p class="p-file">下载次数</p> -->
                            </div>
                            <div class="col-sm-2">
                                <p class="p-file"><a :href="item">下载</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error"></div>
                <div class="col-md-4">
                    <!-- <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">存放点：</label>
                            <div class="col-sm-8">
                                <p class="form-control">{{form.save}}</p>
                            </div>
                        </div>
                    </div>-->
                </div>
                <div class="col-md-12">
                    <!-- <div class="col-md-4"></div> -->
                    <div class="col-md-4" style="text-align: center">
                        <button type="button" class="btn btn-default" @click="back()">返回</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                sysDept: {},
                sysPerson: {}
            }
        };
    },
    components: {},
    mounted() {
        this.getDetails();
    },
    methods: {
        //详情
        getDetails() {
            this.$api.zhunbei
                .planDetail({
                    id: this.$route.query.id
                })
                .then(res => {
                    if (res.success) {
                        this.form = res.data;
                    }
                });
        },
        back() {
            this.$router.push({ path: "plan" });
        },
        getCaption(obj) {
            var index = obj.lastIndexOf(".");
            obj = obj.substring(index + 1, obj.length);
            //  console.log(obj);
            return obj;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.control-label {
    padding: 0px !important;
    line-height: 34px;
    text-align: right;
}
.form-control {
    margin: 0px;
    border-radius: 4px !important;
}
.p-file {
    line-height: 34px;
    height: 34px;
    margin: 0px;
}
</style>
